<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>基础语法1:插值表达式等,data,methods,computed和watch</title>
    <script src="https://unpkg.com/vue@3"></script>
</head>
<body>
    <div id="app">
        <h1 style="color: rgb(91, 91, 151);">基础知识1:插值表达式</h1>
        <p>我的第一个变量在这里展示:{{msg}}</p>
        <!-- {{}}插值表达式的符号 -->
        <p>我是可以计算的表达式:{{4+5*5}}</p>
        <p>我也可以用变量来进行计算：{{num+1}}</p>
        <p>我也可以是条件运算符:{{1+1==2?'ok':'no'}}</p>
        <p>我也可以放一些函数:{{add()}}</p>
        <h1 style="color: rgb(126, 132, 223);">知识点2：data</h1>
        <h3>我们在控制台中可以通过实例名，$data的形式来访问或修改data中数据</h3>
        <h1 style="color: rgb(59, 59, 128);">知识点3：method</h1>
        <h3>创建方法的格式：方法名(){} 或 方法名：function(){}</h3>
        <h3>通过调试方法可以实现比较复杂的一些代码</h3>
        <p>调用函数：{{sub(999)}}</p>
        <h1 style="color: chartreuse;">知识点4：computed计算属性</h1>
        <h3>当我们在插值表达式里面或者方法里面进行复杂逻辑的时候，vue提倡我们使用computed计算属性。
            在计算属性里面，我们可以完成各种比较复杂的逻辑，包括逻辑运算，函数调用等，最后返回一个结果就可以。
        </h3>
        <p>{{rev}}</p>
        <p>{{revMethods()}}</p>
        <!--计算属性在页面中被调用时，后面不加括号  -->
        <h3>计算属性是基于起依赖的变量进行缓存的，只有他依赖的变量改变时，才会重新求值
            而方法是每次页面渲染（刷新）时都会重新计算！
        </h3>
        <h3>计算机属性通常是只读的，不能修改</h3>
        <h1 style="color: rgb(127, 110, 168);">知识点5：watch监听</h1>
        <h3>当我们需要再某种状态变化时，执行一些其他的操作，watch具有状态监听的功能
            只要监听到当前vue实例中的数据变化，就好调用当前数据所绑定的方法
        </h3>
        <h4>1.函数侦听器：在watch选项中声明的函数即为函数式侦听器，其中函数名就是我们要侦听的数据源</h4>
        <h4>2.对象式侦听器：在watch中声明的对象即为对象式侦听器，其中对象名就是我们要侦听的数据源</h4>

    </div>
</body>
</html>
<script>
    const appConn = Vue.createApp({
        //data里面放置全部的数据，包括变量，对象等
        data() {
            return {
                msg:'我的第一个vue页面！',//这是创建字符串变量
                num:1,
                grade:60,
                user:{
                    name:'zhouxiaoyin',
                    age:18
                }
            }
        },
        methods: {
            //创建一个累加的函数，这个方法不带参数
            add(){
                return this.num+100
            },
            //创建一个带参数的方法
            sub:function(val){
                return this.num + val
            },
            //也可以写成 sub(val){}
            revMethods(){
                console.log("我是方法，我被调用了一次！")
                return this.msg.split('').reverse().join('')
            }
        },
        computed:{
            //在此处放置计算属性
            rev(){
                console.log("我是计算属性，我被调用了一次！")
                return this.msg.split('').reverse().join('')
            }
        },
        watch:{
            //函数式侦听器
            grade(newData,oldData){
                console.log('改变前的数据：'+oldData);
                console.log('改变后的数据：'+newData);
                if(newData>oldData)
                    console.log("你很棒");
                else
                console.log("还需努力");
            },
            'user.age':{
                handler(newData,oldData){
                    console.log('改变前的年龄：'+oldData);
                    console.log('改变后的年龄：'+newData);
                    if(newData>=120|| newData<0){
                        console.log('你输入的年龄你确定时正确的？')
                    }
                }
            }
        }
    }).mount("#app")
</script>